<!DOCTYPE html>
<html>
    <head>
        <title>
            Parabola test
        </title>
    </head>
    <style>
    	body{
    		height: 1000px;
    		background: pink;
    	}
    	#p,.p2{
    		background: yellow;
    		position: absolute;
    		top: 300px;
    		left: 20px;
    		/*right: 20px;*/
    	}
    	#c{
    		background: skyblue;
    		right: 20px;
    		top: 0px;
    		position: fixed;
    	}
    	.p2{
    		opacity: .5;
    		border: 1px solid red;
    	}
    </style>
    <body>
      <div id="p">商品</div>
      <div id="c">购物车</div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
     document.addEventListener("DOMContentLoaded", function(event) {
		     console.log("DOM fully loaded and parsed");

		     var yEnd = - (c.getBoundingClientRect().top - p.getBoundingClientRect().top),
		     	 xEnd = c.getBoundingClientRect().left - p.getBoundingClientRect().left,
		     	 a = yEnd < 0 ? 0.0005 : 0,
		     	 b = (yEnd - a*xEnd*xEnd)/xEnd.toFixed(2),
				 direction = xEnd > 0 ? 1 : -1;
		     function moveAnimation(id){
		     	var xTrans = 0, yTrans = 0, speed = 10, i = 0;
		     	var reqID;
		     	var p2 = document.getElementById(id);
		     	function move(){
		     		if(xTrans >= direction*xEnd) {
		     			cancelAnimationFrame(reqID);
		     			p2.parentNode.removeChild(p2)
		     			return;
		     		}
		     		speed += .15;
		     		xTrans += speed;
		     		yTrans = (a*xTrans*xTrans + b*xTrans).toFixed(2);
		     		p2.style.transform = 'translate3d(' + direction*xTrans + 'px,' + -yTrans + 'px, 0)';
		     		reqID = requestAnimationFrame(move);
		     	}

		     	requestAnimationFrame(move);
		     }

		     p.onclick = function(){
		     	var p2 = document.createElement('div'),
		     		id = 'p2'+ Date.now();
		     	p2.innerText = '商品';
		     	p2.classList.add('p2');
		     	p2.id = id;
		     	document.body.appendChild(p2);
		     	moveAnimation(id);
		     }

	});
    </script>
</html>